<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/top"></div>
<div id="Content">
    <div id="Login" align="center">
        <form action="/account/signon" method="post">
            <fieldset style="width:730px; margin:0px auto" >


                <legend>User Login</legend>
                <br>Username: <input  type="text" name="username" id="username"  placeholder="please enter username"/>

<br>
                <br>Password: <input  type="password" name="password" id="password" placeholder="Please enter password"/>
                <br>
                <br>
                    Randcode:<input  id="validation" type="text" name="image" onblur="getCode()" placeholder="Please enter code">
                    <img   id="VerifyCode"  src="pictureCheckCode"  />
                    <input type="button" value="New Code" id="flush">
                    <font color="red" th:text="${imageMess}"></font>
                    <img id="isTrueInfo" src="../images/white.png">
                    <br><br>
            <p th:if="${msg!=null}" th:text="${msg}"></p>
            <input type="submit" name="signon" value="Login" />
            <p id="font">Use mobile phone number to <a href="/account/phonelogin">login</a> without password
            <br>Need a user name and password?
            <a href="/account/newAccountForm">Register Now!</a>
            </p>

            </fieldset>
        </form>

        <script type="text/javascript">

            document.getElementById("flush").onclick = function () {

                document.getElementById("VerifyCode").src =
                    "/account/pictureCheckCode?time=" + new Date().getTime();
            };
        </script>
        <script>
            var xhr;
            function getCode(){
                var code = document.getElementById("validation").value;
                xhr = new XMLHttpRequest();
                xhr.open("GET","/account/checkCode?code="+code,true);
                xhr.onreadystatechange = processCode;
                xhr.send(null);
            }
            function processCode(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200) {
                        var responseInfo = xhr.responseText;

                        if(responseInfo == 'T'){
                            document.getElementById("isTrueInfo").src =
                                "../images/isExist.png" ;
                        }
                        else if(responseInfo =='F'){
                            document.getElementById("isTrueInfo").src =
                                "../images/error.png" ;

                        }
                    }
                }
            }

        </script>

    </div>
<div th:replace="common/bottom"></div>
</body>
</html>